<template>
  <el-dropdown
    placement="bottom-end"
    popper-class="select-none"
    @visible-change="handleVisibleChange"
    @command="handleCommand"
  >
    <span
      class="tagview-contents-more"
      :class="{ 'tagview-contents-more-active': active }"
    >
      <span class="tagview-contents-more-icon">
        <i class="box box-t"></i>
        <i class="box box-b"></i>
      </span>
    </span>

    <template #dropdown>
      <!-- <el-dropdown-menu>
        <template v-for="(item, index) in list" :key="item.name">
          <el-dropdown-item
            :command="index"
            :disabled="index === 1 && tagViewLenght === 1"
          >
            <SvgIcon :showDefault="false" size="16px" :name="item.icon" />
            {{ item.name }}
          </el-dropdown-item>
        </template>
      </el-dropdown-menu> -->
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    list?: { icon: string; name: string }[]
    tagViewLenght?: number
  }>(),
  {},
)

const $emit = defineEmits(['handleClick'])
const active = ref(false)
const handleVisibleChange = (type: boolean) => (active.value = type) //菜单下拉框事件
const handleCommand = (type: boolean) => $emit('handleClick', type, false) //点击某一项执行的方法
</script>

<style lang="scss" scoped>
.tagview-contents-more {
  position: relative;
  box-sizing: border-box;
  display: block;
  text-align: left;
  &-active,
  &:hover {
    &:after {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 0;
      content: '';
    }
    .tagview-contents-more-icon {
      transform: rotate(90deg);

      .box-t {
        &:before {
          transform: rotate(45deg);
        }
      }

      .box:before,
      .box:after {
        background: var(--el-color-primary);
      }
    }
  }
  &-icon {
    display: inline-block;
    color: #9a9a9a;
    cursor: pointer;
    transition: transform 0.3s ease-out;

    .box {
      position: relative;
      display: block;
      width: 14px;
      height: 8px;

      &:before {
        position: absolute;
        top: 2px;
        left: 0;
        width: 6px;
        height: 6px;
        content: '';
        background: #9a9a9a;
      }

      &:after {
        position: absolute;
        top: 2px;
        left: 8px;
        width: 6px;
        height: 6px;
        content: '';
        background: #9a9a9a;
      }
    }

    .box-t {
      &:before {
        transition: transform 0.3s ease-out 0.3s;
      }
    }
  }
}
</style>
